<template>
    <div v-if="progressData.length" :class="$style.progressBarContain">
      <template v-for="(progress,index) in progressData">
        <div class="flex " :class="$style.item_wrapper">
          <div  class="b_FS-28 c-mainText" :class="$style.item_l" v-html='progress.date'>

          </div>
          <div :class="$style.item_dot_container">
            <div  :class="[$style.item_dot, switchDots(progress.grade)]"></div>
            <span :class="$style.item_dot_line" v-if='index != progressData.length -1 '></span>
          </div>
          <div @click="handleClick(index)" :class="$style.item_r" >
            <p class="c-title b_FS-36 b_line-1">{{ progress.themeTitle }}</p>
            <p class="c-mainText b_FS-32 b_line-1">{{ progress.desc }}</p>
          </div>
        </div>
      </template>
      <!--<div class="flex " :class="$style.item_wrapper">-->
        <!--<div  class="b_FS-28 c-mainText" :class="$style.item_l">-->
          <!--8:00 AM-->
        <!--</div>-->
        <!--<div :class="$style.item_dot_container">-->
          <!--<div class="c-general-bg" :class="[$style.item_dot]"></div>-->
          <!--<span :class="$style.item_dot_line"></span>-->
        <!--</div>-->
        <!--<div :class="$style.item_r">-->
          <!--<p class="c-title b_FS-36 b_line-1">Do some cleaning</p>-->
          <!--<p class="c-mainText b_FS-32 b_line-1">Clean the bedroom and sitting room ddddddddddddd</p>-->
        <!--</div>-->
      <!--</div>-->

    </div>
</template>

<script type="text/babel">
    export default {
        name: "VProgressBar",
        props: {
          progressData:{
            type: Array,
            default(){
              return []
            }
          }
        },
        components: {},
        data() {
            return {}
        },
        created() {
        },
        mounted() {
        },
        beforeDestroy() {
        },
        computed: {},
        methods: {
          switchDots(grade){
            const dotsBgs = 'c-special-bg c-main-bg c-general-bg c-temporary-bg c-delay-bg c-complete-bg'.split(' ')
            let dotClass = ''
            switch(grade){
              case 0 :dotClass = dotsBgs[0];break ;
              case 1 :dotClass = dotsBgs[1];break ;
              case 2 :dotClass = dotsBgs[2];break ;
              case 3 :dotClass = dotsBgs[3];break ;
              case 4 :dotClass = dotsBgs[4];break ;
              case 5 :dotClass = dotsBgs[5];break ;

              case 'special' :dotClass = dotsBgs[0];break ;
              case 'main' :dotClass = dotsBgs[1];break ;
              case 'general' :dotClass = dotsBgs[2];break ;
              case 'temporary' :dotClass = dotsBgs[3];break ;
              case 'delay' :dotClass = dotsBgs[4];break ;
              case 'complete' :dotClass = dotsBgs[5];break ;
            }
            return dotClass
          },
          handleClick(index){
            this.$emit('contentClick', index)
          }
        }
    }
</script>

<style module lang='scss'>
    .progressBarContain{
      padding-top: 35px ;
      .item_wrapper{
        height: 120px ;
        .item_l{
          width:170px ;
          text-align: right;
          margin-right: 5px ;
          line-height: 1.2;
        }
        .item_dot_container{
          position: relative;
          display: flex ;
          justify-content: center;
          .item_dot{
            width: 25px ;
            height: 25px ;
            border-radius: 50%;
            border: 4px solid #fff;
            display: inline-block;
            z-index: 2;
            position: relative;
          }
          .item_dot_line{
            display: inline-block;
            background-color: #B5B7B6 ;
            height: 160px ;
            width: 2px ;
            position: absolute;
            top: -35px ;
            /* 用tranlate 有样式bug */
            left: 50% ;
            transform: translateX(-50%);
            z-index: 1;
          }
        }
        .item_r{
          margin-left: 10px;
          text-align: left;
          >*{
            margin: 0 ;
            margin-bottom: 10px;
            width: 530px;
          }
        }
      }
    }



</style>
